<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${fileName}</title>
<link rel="icon" href="/images/logo.ico">
<script src="/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
    body {
        margin: 0;
        padding: 0 30px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;
    }

    #demo {
        width: 100%;
        height: 100%;
        color: white;
        background: black;
        font-size: 16px;
    }

    .action-content {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .action-content-main {
        margin-bottom: 20px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    }

    .panel-title {
        padding: 10px 15px;
        border-bottom: 1px solid #0000;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        color: #333;
        background-color: #f5f5f5;
        border-color: #ddd;
        display: flex;
        align-items: center;
    }

    .panel-title-name {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 16px;
        color: inherit;
        margin-right: 28px;
    }

    .panel-content {
        padding: 15px;
        overflow: auto;
    }
</style>
<script type="text/javascript">
    $(function () {
        // var offsetH = $(document).height() - 100;
        var offsetH = 820;
        $('.panel-content').css('height', offsetH + 'px')
        var url = location.search
        var queryParams = parseQueryString(url)
        var currentPage = queryParams.pageNumber - 0
        if (isNaN(currentPage)) {
            currentPage = 0
        }

        if (queryParams.previewLength != null && queryParams.previewLength != '' ) {
            $("#batchSize").val(queryParams.previewLength);
        }

        if (queryParams.lineLength != null && queryParams.lineLength != '' ) {
            $("#lineLength").val(queryParams.lineLength);
        }

        function parseQueryString(url) {
            var result = {}
            if (url.indexOf('?') > -1) {
                var str = url.split('?')[1];
                var temp = str.split('&');
                for (var i = 0; i < temp.length; i++) {
                    var temp2 = temp[i].split('=');
                    result[temp2[0]] = temp2[1];
                }
            }
            return result;
        }
        // 上一页
        $('#previous').click(function () {
            if (currentPage <= 0) {
                currentPage = 0
            } else {
                currentPage = currentPage - 1
            }
            goLocation(currentPage)
        })
        // 下一页
        $('#next').click(function () {
            if (currentPage < (Number.parseInt("${totalPage}") - 1)) {
                currentPage = currentPage + 1
                goLocation(currentPage)
            }
        })

        $("#batchSize").blur(function () {
            var batchSize = $("#batchSize").val();

            if (batchSize != null && batchSize != '') {
                queryParams['previewLength'] =  batchSize
            } else {
                delete queryParams.previewLength
            }

            var path = "?";
            for (const i in queryParams) {
                path = path + i + "=" + queryParams[i] + "&"
            }
            path = path.slice(0, path.length - 1)

            window.location.href = path
        })

        $("#lineLength").blur(function () {
            var batchSize = $("#lineLength").val();

            if (batchSize != null && batchSize != '') {
                queryParams['lineLength'] =  batchSize
            } else {
                delete queryParams.lineLength
            }

            var path = "?";
            for (const i in queryParams) {
                path = path + i + "=" + queryParams[i] + "&"
            }
            path = path.slice(0, path.length - 1)

            window.location.href = path
        })

        function goLocation(tempCurrentPage) {
            var regex = /&pageNumber=\d+/
            var tempSearch = '';
            if (regex.test(location.search)) {
                tempSearch = location.search.replace(regex, `&pageNumber=${tempCurrentPage}`)
            } else {
                tempSearch = location.search + `&pageNumber=${tempCurrentPage}`
            }

            var path = location.origin + location.pathname + tempSearch
            window.location.href = path
        }
    })
</script>
</head>

<body>
    <div class="action-content">
        <div class="action-content-main">
            <div class="panel-title">
                <h4 class="panel-title-name">${fileName}</h4>
                <div class="btn-area">
                    <button id="previous">上一页</button>
                    <button id="current">${currentPage} / ${totalPage}页</button>
                    <button id="next">下一页</button>
                    <button id="total">共${totalPage}页</button>

                    <span style="margin-left: 5px">
                        每行字节数：<input id="lineLength" />
                    </span>

                    <span style="margin-left: 5px">
                        每页字节数：<input id="batchSize" />
                    </span>

                    <span style="margin-left: 5px">
                        <button onclick="return false" >确定</button>
                    </span>
                </div>
            </div>
            <div class="panel-content">
<!--                <textarea name="demo" id="demo" disabled>-->
<!--                    -->
<!--                </textarea>-->
<!--                <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;0&emsp;&nbsp;1&emsp;&nbsp;2&emsp;&nbsp;3&emsp;&nbsp;4&emsp;&nbsp;5&emsp;&nbsp;6&emsp;&nbsp;7&emsp;&nbsp;8&emsp;&nbsp;9&emsp;&nbsp;a&emsp;&nbsp;b&emsp;&nbsp;c&emsp;&nbsp;d&emsp;&nbsp;e&emsp;&nbsp;f</p>-->
                ${textData}
            </div>
        </div>
    </div>
</body>

</html>